<div class="box-page-container">
  <div class="box-page-header">
    <div class="title">Загруженные файлы</div>
    <div class="other-controls right">
    </div>
  </div>
  <div class="box-page-body">
    <div class="box-message" id="message" style="display: none"></div>
    <div class="form">
        <h3>Список файлов:</h3>
        <ul id="attachment-list" style="display: none"></ul>
        <dd><input name="fileToUpload[]" id="file_upload" class="MultiFile" type="file"/></dd>
    </div>
  </div>
  <div class="box-page-footer">
    <div class="box-controls">
      <div class="clear-fix"></div>
    </div>
  </div>
  <div class="clear-fix"></div>
</div>
<link rel="stylesheet" href="/css/uploadify.css" />
<script src="/js/jquery/jquery.uploadify.js"></script>
<script>
var attachments = <?php echo $this->files ?>;
$.each(attachments, function(){
    addAttachs(this);
});
$('#file_upload').uploadify({
	'formData': {'sid': '<?php echo $this->client->sid ?>'},
	'debug'	   : false,
	'buttonText': 'Выбрать файлы...',
	'removeCompleted': true,
	'fileSizeLimit' : '50MB',
	'fileTypeExts' : '*.gif; *.jpg; *.png; *.jpeg; *.mp3; *.avi; *.mp4; *.3gp; *.mpeg; *.txt; *.doc; *.docx; *.xls; *.xlsx; *.ppt; *.pptx; *.rtf; *.pdf; *.rar; *.psd',
    'swf'      : '/js/jquery/uploadify/uploadify.swf',
    'uploader' : '/cp/attachments/upload.attachment',
    'onUploadSuccess' : function(file, data, response) {
        addAttachs($.parseJSON(data));
    }
});

$('#file_upload-button').css({
    'height': '20px',
    'line-height': '20px',
    'width': '90px'
});
function addAttachs(data) {
    html = '<li id="'+data.id+'">';
    if (data.type == 'image') {
        html+= '<img src="/images/file-types/image.png" width="16"/ >';
    } else if (data.type == 'doc') {
    	html+= '<img src="/images/file-types/document.png" width="16"/ >';
    } else if (data.type == 'audio') {
    	html+= '<img src="/images/file-types/audio.png" width="16"/ >';
    } else if (data.type == 'video') {
    	html+= '<img src="/images/file-types/video.png" width="16"/ >';
    } else if (data.type == 'other') {
    	html+= '<img src="/images/file-types/other.png" width="16"/ >';
    }
    html+= '<span>' + data.url + '</span>';
    html+= '<span style="float: right;"><a href="' + data.url + '" target="_blank">Открыть</a> <a href="#" onclick="deleteAttach(this, '+data.id+'); return false;">Удалить</a><div id="progress" style="display: none;" class="progress ajax-preloader-base"></div></span>';
    html+= '</li>';
    $('#attachment-list').show().append(html);
}
function deleteAttach(el, id) {
	$(el).parent().find('a').hide().parent().find('#progress').show();
	$.getJSON('/cp/attachments/delete.attach', {'id': id}, function(response){
		if (typeof response.status == 'string' && response.status == 'ok') {
			$(el).parent().parent().remove();
		}
	});
}
</script>